<sb-layout-dashboard>
    <sb-dashboard-head title="Settings" [hideBreadcrumbs]="false"></sb-dashboard-head>
    <sb-card>
        <div class="card-header">
            <fa-icon class="mr-1" [icon]='["fas", "cogs"]'></fa-icon>Settings
        </div>
        <div class="card-body" *ngIf="!loading">
            <ngb-alert  *ngIf="outcomeBadge"
                        [type]="outcomeBadge.success ? 'success' : 'danger'"
            >
                {{ outcomeBadge.message }}
            </ngb-alert>
            <form (ngSubmit)="onSubmit()" #configForm="ngForm">
                <strong>General</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="name">Instance ID</label>
                            <pre class="small text-muted">
                                {{ schema.properties.instanceId.description }}
                            </pre>
                            <input type="text" class="form-control" id="instanceId" required
                                [(ngModel)]="config.instanceId" name="instanceId" #instanceId="ngModel">
                            <div [hidden]="instanceId.valid || instanceId.pristine" class="alert alert-danger">
                                Instance ID is required
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="logLevel">Log Level</label>
                            <pre class="small text-muted">
                                {{ schema.properties.loglevel.description }}
                            </pre>
                            <select class="form-control" id="logLevel"
                                    [(ngModel)]="config.loglevel" name="logLevel"
                                    #logLevel="ngModel">
                                <option [ngValue]="0">DEBUG</option>
                                <option [ngValue]="1">INFO</option>
                                <option [ngValue]="2">IMPORTANT</option>
                                <option [ngValue]="3">WARN</option>
                                <option [ngValue]="4">ERROR</option>
                            </select>
                        </div>
                    </div>
                </div>

                <strong>Admins</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-12">
                        --- currently only in file ---
                    </div>
                </div>

                <strong>Web</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-12">
                        --- currently only in file ---
                    </div>
                </div>

                <strong>Discord</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="discordBotToken">Discord Bot Token</label>
                            <pre class="small text-muted">
                                {{ schema.properties.discordBotToken.description }}
                            </pre>
                            <input type="text" class="form-control" id="discordBotToken" [(ngModel)]="config.discordBotToken"
                                name="discordBotToken">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Discord Channels</label>
                            <pre class="small text-muted">
                                {{ schema.properties.discordChannels.description }}
                            </pre>
                            <div class="row" *ngFor="let chan of getDiscordChannels(); let idx = index">
                                <div class="col-md-6">
                                    <input  type="text"
                                            class="form-control"
                                            [(ngModel)]="chan.channel"
                                            [ngModelOptions]="{standalone: true}"
                                    >
                                </div>
                                <div class="col-md-1">
                                    <button class="btn btn-danger form-control" type="button" (click)="config.discordChannels.splice(idx, 1)">
                                        <fa-icon class="mr-1" [icon]='["fas", "trash"]'></fa-icon>Delete Channel
                                    </button>
                                </div>
                                <div class="col-md-4">
                                    <div *ngFor="let mode of chan.mode; let modeidx = index" style="display: flex; flex-direction: row;">
                                        <select class="form-control"
                                                [(ngModel)]="chan.mode[modeidx]"
                                                [ngModelOptions]="{standalone: true}"
                                        >
                                            <option [ngValue]="'admin'">Admin</option>
                                            <option [ngValue]="'rcon'">RCon</option>
                                            <option [ngValue]="'notification'">Notification</option>
                                        </select>
                                        <button class="btn btn-danger form-control" type="button" (click)="chan.mode.splice(modeidx, 1)">
                                            <fa-icon class="mr-1" [icon]='["fas", "trash"]'></fa-icon>Delete Mode
                                        </button>
                                    </div>
                                    <button type="button" class="btn form-control" (click)="chan.mode.push('admin')">
                                        <fa-icon class="mr-1" [icon]='["fas", "plus-circle"]'></fa-icon>Add Mode
                                    </button>
                                </div>

                            </div>
                        </div>
                        <button type="button" class="btn form-control" (click)="config.discordChannels.push({channel: '', mode: 'admin'})">
                            <fa-icon class="mr-1" [icon]='["fas", "plus-circle"]'></fa-icon>Add Channel
                        </button>
                    </div>
                </div>

                <strong>DayZ</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="rconPassword">RCon Password</label>
                            <pre class="small text-muted">
                                {{ schema.properties.rconPassword.description }}
                            </pre>
                            <input type="text" class="form-control" id="rconPassword" [(ngModel)]="config.rconPassword"
                                name="rconPassword">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="serverPath">Server Path</label>
                            <pre class="small text-muted">
                                {{ schema.properties.serverPath.description }}
                            </pre>
                            <input type="text" class="form-control" id="serverPath" [(ngModel)]="config.serverPath"
                                name="serverPath">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="serverPort">Server Port</label>
                            <pre class="small text-muted">
                                {{ schema.properties.serverPort.description }}
                            </pre>
                            <input type="number" class="form-control" id="serverPort" [(ngModel)]="config.serverPort"
                                name="serverPort">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="serverExe">Server EXE</label>
                            <pre class="small text-muted">
                                {{ schema.properties.serverExe.description }}
                            </pre>
                            <input type="text" class="form-control" id="serverExe" [(ngModel)]="config.serverExe"
                                name="serverExe">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="experimentalServer" [(ngModel)]="config.experimentalServer"
                            name="experimentalServer">
                            <label class="form-check-label" for="experimentalServer">Experimental Server</label>
                            <pre class="small text-muted">
                                {{ schema.properties.experimentalServer.description }}
                            </pre>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="battleyePath">BattlEye Path</label>
                            <pre class="small text-muted">
                                {{ schema.properties.battleyePath.description }}
                            </pre>
                            <input type="text" class="form-control" id="battleyePath" [(ngModel)]="config.battleyePath"
                                name="battleyePath">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="profilesPath">Profiles Path</label>
                            <pre class="small text-muted">
                                {{ schema.properties.profilesPath.description }}
                            </pre>
                            <input type="text" class="form-control" id="profilesPath" [(ngModel)]="config.profilesPath"
                                name="profilesPath">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="serverCfgPath">ServerCfg Path</label>
                            <pre class="small text-muted">
                                {{ schema.properties.serverCfgPath.description }}
                            </pre>
                            <input type="text" class="form-control" id="serverCfgPath" [(ngModel)]="config.serverCfgPath"
                                name="serverCfgPath">
                        </div>
                    </div>
                </div>

                <strong>Mods</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Steam WS Mods (Mod IDs)</label>
                            <pre class="small text-muted">
                                {{ schema.properties.steamWsMods.description }}
                            </pre>
                            <div class="row" style="margin-bottom: 15px;" *ngFor="let mod of config.steamWsMods; let idx = index">
                                <div class="col-md-11" *ngIf="config.steamWsMods[idx]['includes']">
                                    <input  type="text"
                                            class="form-control"
                                            [(ngModel)]="config.steamWsMods[idx]"
                                            [ngModelOptions]="{standalone: true}"
                                    >
                                </div>
                                <div class="col-md-11" *ngIf="!config.steamWsMods[idx]['includes']">
                                    <div class="prefixed-input">
                                        <label>Name</label>
                                        <input  type="text"
                                                class="form-control"
                                                [(ngModel)]="config.steamWsMods[idx]['name']"
                                                [ngModelOptions]="{standalone: true}"
                                        >
                                    </div>
                                    <div class="prefixed-input">
                                        <label>WorkshopId</label>
                                        <input  type="text"
                                                class="form-control"
                                                [(ngModel)]="config.steamWsMods[idx]['workshopId']"
                                                [ngModelOptions]="{standalone: true}"
                                        >
                                    </div>
                                    <div class="prefixed-input">
                                        <label>Disabled?</label>
                                        <input  type="checkbox"
                                                class="form-control"
                                                [(ngModel)]="config.steamWsMods[idx]['disabled']"
                                                [ngModelOptions]="{standalone: true}"
                                        >
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <button class="btn btn-danger form-control" type="button" (click)="config.steamWsMods.splice(idx, 1)">
                                        <fa-icon class="mr-1" [icon]='["fas", "trash"]'></fa-icon>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn form-control" (click)="config.steamWsMods.push({name: '', workshopId: ''})">
                            <fa-icon class="mr-1" [icon]='["fas", "plus-circle"]'></fa-icon>Add Entry
                        </button>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Local Mods (Paths)</label>
                            <pre class="small text-muted">
                                {{ schema.properties.localMods.description }}
                            </pre>
                            <div class="row" *ngFor="let mod of config.localMods; let idx = index">
                                <div class="col-md-11">
                                    <input  type="text"
                                            class="form-control"
                                            [(ngModel)]="config.localMods[idx]"
                                            [ngModelOptions]="{standalone: true}"
                                    >
                                </div>
                                <div class="col-md-1">
                                    <button class="btn btn-danger form-control" type="button" (click)="config.localMods.splice(idx, 1)">
                                        <fa-icon class="mr-1" [icon]='["fas", "trash"]'></fa-icon>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn form-control" (click)="config.localMods.push('')">
                            <fa-icon class="mr-1" [icon]='["fas", "plus-circle"]'></fa-icon>Add Entry
                        </button>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Server Mods (Paths)</label>
                            <pre class="small text-muted">
                                {{ schema.properties.serverMods.description }}
                            </pre>
                            <div class="row" *ngFor="let mod of config.serverMods; let idx = index">
                                <div class="col-md-11">
                                    <input  type="text"
                                            class="form-control"
                                            [(ngModel)]="config.serverMods[idx]"
                                            [ngModelOptions]="{standalone: true}"
                                    >
                                </div>
                                <div class="col-md-1">
                                    <button class="btn btn-danger form-control" type="button" (click)="config.serverMods.splice(idx, 1)">
                                        <fa-icon class="mr-1" [icon]='["fas", "trash"]'></fa-icon>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn form-control" (click)="config.serverMods.push('')">
                            <fa-icon class="mr-1" [icon]='["fas", "plus-circle"]'></fa-icon>Add Entry
                        </button>
                    </div>
                </div>

                <strong>DayZ StartFlags</strong>
                <hr>
                <div class="row spaced">
                    <div class="col">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="doLogs" [(ngModel)]="config.doLogs"
                            name="doLogs">
                            <label class="form-check-label" for="doLogs">doLogs</label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="adminLog" [(ngModel)]="config.adminLog"
                            name="adminLog">
                            <label class="form-check-label" for="adminLog">adminLog</label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="netLog" [(ngModel)]="config.netLog"
                            name="netLog">
                            <label class="form-check-label" for="netLog">netLog</label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="freezeCheck" [(ngModel)]="config.freezeCheck"
                            name="freezeCheck">
                            <label class="form-check-label" for="freezeCheck">freezeCheck</label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="filePatching" [(ngModel)]="config.filePatching"
                            name="filePatching">
                            <label class="form-check-label" for="filePatching">filePatching</label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="scriptDebug" [(ngModel)]="config.scriptDebug"
                            name="scriptDebug">
                            <label class="form-check-label" for="scriptDebug">scriptDebug</label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="scrAllowFileWrite" [(ngModel)]="config.scrAllowFileWrite"
                            name="scrAllowFileWrite">
                            <label class="form-check-label" for="scrAllowFileWrite">scrAllowFileWrite</label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="limitFPS">limitFPS</label>
                            <input type="number" class="form-control" id="limitFPS" [(ngModel)]="config.limitFPS"
                            name="limitFPS">
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="cpuCount">cpuCount</label>
                            <input type="number" class="form-control" id="cpuCount" [(ngModel)]="config.cpuCount"
                            name="cpuCount">
                        </div>
                    </div>
                </div>

                <strong>Backups</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label for="backupPath">Backup Path</label>
                            <pre class="small text-muted">
                                {{ schema.properties.backupPath.description }}
                            </pre>
                            <input type="text" class="form-control" id="backupPath"
                                [(ngModel)]="config.backupPath" name="backupPath">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="backupMaxAge">Max Backup Age in Days</label>
                            <pre class="small text-muted">
                                {{ schema.properties.backupMaxAge.description }}
                            </pre>
                            <input type="number" class="form-control" id="backupMaxAge" [(ngModel)]="config.backupMaxAge"
                            name="backupMaxAge">
                        </div>
                    </div>
                </div>

                <strong>Steam</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="steamUsername">Steam User</label>
                            <pre class="small text-muted">
                                {{ schema.properties.steamUsername.description }}
                            </pre>
                            <input type="text" class="form-control" id="steamUsername"
                                [(ngModel)]="config.steamUsername" name="steamUsername" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="steamPassword">Steam Password</label>
                            <pre class="small text-muted">
                                {{ schema.properties.steamPassword.description }}
                            </pre>
                            <input type="text" class="form-control" id="steamPassword"
                                [(ngModel)]="config.steamPassword" name="steamPassword">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="steamCmdPath">Steam CMD Path</label>
                            <pre class="small text-muted">
                                {{ schema.properties.steamCmdPath.description }}
                            </pre>
                            <input type="text" class="form-control" id="steamCmdPath"
                                [(ngModel)]="config.steamCmdPath" name="steamCmdPath">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="steamWorkshopPath">Steam WS Path</label>
                            <pre class="small text-muted">
                                {{ schema.properties.steamWorkshopPath.description }}
                            </pre>
                            <input type="text" class="form-control" id="steamWorkshopPath"
                                [(ngModel)]="config.steamWorkshopPath" name="steamWorkshopPath">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="steamMetaPath">Steam Meta Path</label>
                            <pre class="small text-muted">
                                {{ schema.properties.steamMetaPath.description }}
                            </pre>
                            <input type="text" class="form-control" id="steamMetaPath"
                                [(ngModel)]="config.steamMetaPath" name="steamMetaPath">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="updateServerOnStartup" [(ngModel)]="config.updateServerOnStartup"
                            name="updateServerOnStartup">
                            <label class="form-check-label" for="updateServerOnStartup">Update Server on StartUp</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="updateServerBeforeServerStart" [(ngModel)]="config.updateServerBeforeServerStart"
                            name="updateServerBeforeServerStart">
                            <label class="form-check-label" for="updateServerBeforeServerStart">Update Server Before Server Start</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="validateServerAfterUpdate" [(ngModel)]="config.validateServerAfterUpdate"
                            name="validateServerAfterUpdate">
                            <label class="form-check-label" for="validateServerAfterUpdate">Validate Server After Update</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="updateModsOnStartup" [(ngModel)]="config.updateModsOnStartup"
                            name="updateModsOnStartup">
                            <label class="form-check-label" for="updateModsOnStartup">Update Mods on StartUp</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="updateModsBeforeServerStart" [(ngModel)]="config.updateModsBeforeServerStart"
                            name="updateModsBeforeServerStart">
                            <label class="form-check-label" for="updateModsBeforeServerStart">Update Mods Before Server Start</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="validateModsAfterUpdate" [(ngModel)]="config.validateModsAfterUpdate"
                            name="validateModsAfterUpdate">
                            <label class="form-check-label" for="validateModsAfterUpdate">Validate Mods After Update</label>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="linkModDirs" [(ngModel)]="config.linkModDirs"
                            name="linkModDirs">
                            <label class="form-check-label" for="linkModDirs">Link Mod Dirs</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check">
                            <input  type="checkbox" class="form-check-input" id="copyModDeepCompare"
                                    [(ngModel)]="config.copyModDeepCompare" name="copyModDeepCompare">
                            <label for="copyModDeepCompare">Copy Mod Deep Compare</label>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="updateModsMaxBatchSize">Mod Update Batch Size</label>
                            <pre class="small text-muted">
                                {{ schema.properties.updateModsMaxBatchSize.description }}
                            </pre>
                            <input type="number" class="form-control" id="updateModsMaxBatchSize"
                                [(ngModel)]="config.updateModsMaxBatchSize" name="updateModsMaxBatchSize">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="updateModsMaxBatchFileSize">Mod Update Max Batch Filesize</label>
                            <pre class="small text-muted">
                                {{ schema.properties.updateModsMaxBatchFileSize.description }}
                            </pre>
                            <input type="number" class="form-control" id="updateModsMaxBatchFileSize"
                                [(ngModel)]="config.updateModsMaxBatchFileSize" name="updateModsMaxBatchFileSize">
                        </div>
                    </div>

                </div>

                <strong>Events</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-12">
                        --- currently only in file ---
                    </div>
                </div>

                <strong>Hooks</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-12">
                        --- currently only in file ---
                    </div>
                </div>

                <strong>Metrics</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-12">
                        --- currently only in file ---
                    </div>
                </div>

                <strong>Server.cfg</strong>
                <hr>
                <div class="row spaced">
                    <div class="col-md-12" *ngFor="let prop of (serverCfgProps || [])">
                        <div style="display: flex; flex-direction: row; justify-content: space-between;">
                            <div class="form-group">
                                <label for="cfg.{{prop.name}}">{{prop.name}}</label>
                                <pre class="small text-muted">
                                    {{ prop.description }}
                                </pre>
                                <input  *ngIf="!prop.enum && prop.type === 'string'"
                                        type="text" class="form-control"
                                        id="cfg.{{prop.name}}" name="cfg.{{prop.name}}"
                                        [(ngModel)]="config.serverCfg[prop.name]"
                                        [ngModelOptions]="{standalone: true}"
                                >
                                <input  *ngIf="!prop.enum && prop.type === 'number'"
                                        type="number" class="form-control"
                                        id="cfg.{{prop.name}}" name="cfg.{{prop.name}}"
                                        [(ngModel)]="config.serverCfg[prop.name]"
                                        [ngModelOptions]="{standalone: true}"
                                >
                                <select *ngIf="prop.enum"
                                        class="form-control"
                                        id="cfg.{{prop.name}}" name="cfg.{{prop.name}}"
                                        [(ngModel)]="config.serverCfg[prop.name]"
                                        [ngModelOptions]="{standalone: true}"
                                >
                                    <option *ngFor="let opt of prop.enum"
                                            [ngValue]="opt"
                                    >
                                        {{ opt }}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div *ngIf="prop.custom">
                            <button type="submit" class="btn btn-danger">
                                <fa-icon class="mr-1" [icon]='["fas", "trash"]'></fa-icon>Delete Field
                            </button>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="cfg.mission">Mission</label>
                            <pre class="small text-muted">
                                {{ schema.definitions.ServerCfg.properties.Missions.description }}
                            </pre>
                            <input  type="text" class="form-control"
                                    id="cfg.mission" name="cfg.mission"
                                    [(ngModel)]="config.serverCfg.Missions.DayZ.template"
                            >
                        </div>
                    </div>
                </div>

                <div class="row" style="justify-content: space-between;">
                    <div class="col-md-9">
                        <div style="display: flex; flex-direction: row; flex-grow: 1;">
                            <div class="form-group" style="display: flex; flex-direction: row;">
                                <label for="customServerCfgField">Custom Field Name</label>
                                <input  type="text" class="form-control ml-3"
                                        id="customServerCfgField" name="customServerCfgField"
                                        #customServerCfgField
                                >
                            </div>
                            <div style="display: flex; flex-direction: row;">
                                <button type="button" class="btn form-control ml-3" (click)="addCustomServerCfgEntry(customServerCfgField.value, 'string'); customServerCfgField.value = ''">
                                    <fa-icon class="mr-1" [icon]='["fas", "plus-circle"]'></fa-icon>Add Custom Text Entry
                                </button>
                                <button type="button" class="btn form-control ml-3" (click)="addCustomServerCfgEntry(customServerCfgField.value, 'number'); customServerCfgField.value = ''">
                                    <fa-icon class="mr-1" [icon]='["fas", "plus-circle"]'></fa-icon>Add Custom Number Entry
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div style="display: flex; flex-direction: row; justify-content: space-between;">
                            <button type="submit" class="btn btn-success"
                                [disabled]="!configForm.form.valid">Submit</button>
                            <button type="button" class="btn btn-secondary" (click)="reset()">Reset</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-body" *ngIf="loading">
            <fa-icon [icon]='["fas", "spinner"]' [classes]="['fa-spin']"></fa-icon>
        </div>
    </sb-card>
</sb-layout-dashboard>
